<template>
  <div class="home">
    <div class="content">
      <template v-for="{ lotteryCode, isValidity } in gameStore.gameList">
        <div v-if="isValidity !== 3" :key="lotteryCode" class="img-container">
          <button
            class="item"
            @click="clickRouter(lotteryCode, isValidity)"
            :class="isValidity !== 1 && 'maintain'"
            :aria-label="lotteryCode"
          >
            <picture>
              <source :srcset="getImg(lotteryCode, true)" />
              <img class="img" :src="getImg(lotteryCode)" alt="" />
            </picture>
            <span v-if="isValidity !== 1" class="maintain-txt">{{ getTxt(isValidity) }}</span>
          </button>
        </div>
      </template>
    </div>
    <Loading v-if="loading" size="0.48rem" class="home-loading" color="#1989fa" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGameStore } from '@/stores/game'
import { useRouter } from 'vue-router'
// import 'vue-progressive-image/dist/style.css'

// import { ProgressiveImage } from 'vue-progressive-image'
// import placeholderImg from '@/assets/img/home/default.jpg'
import { Loading } from 'vant'

const gameStore = useGameStore()
const loading = ref(false)
const router = useRouter()

const getTxt = (val) => {
  // 0:维护 1:正常 2:休市 3:隐藏
  if (val === 2) return '未开盘'
  if (val === 0) return '维护中'
  return ''
}

const clickRouter = async (key, isValidity) => {
  if (isValidity !== 1) return

  loading.value = true
  // 等过渡完成
  await new Promise((resolve) => setTimeout(resolve, 200))
  await router.push('/game/' + key.toLowerCase())
}

const getImg = computed(
  () =>
    (lotteryCode, bool = false) =>
      new URL(`../../assets/img/home/${lotteryCode}.${bool ? 'webp' : 'png'}`, import.meta.url).href,
)
</script>

<style scoped lang="less">
.home {
  width: 100%;
  position: relative;
  //background: #fff
  box-sizing: border-box;
  height: 100%;
  overflow: auto;

  .content {
    width: 100%;
    padding: 11px 11px 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .img {
      width: 112px;
      height: 135px;
    }
    .item.maintain {
      position: relative;

      &::before {
        border-radius: 0.4rem;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 112px;
        height: 135px;
        border: 1px solid #fff;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 99.91%);
      }

      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 64px;
        background:
          url('@/assets/img/home/over-mask1.png') center center no-repeat,
          url('@/assets/img/home/over-mask2.png') center center no-repeat;
        background-size:
          50px 64px,
          30px 30px;
      }

      .maintain-txt {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        color: #fff;
        font-weight: 600;
      }
    }
  }
  .img-container {
    height: 135px;
    margin-right: 8px;
    border-radius: 0.4rem;
    box-sizing: border-box;
    margin-bottom: 12px;

    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }
  button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    padding: 0;
    margin: 0;
    text-align: center;
    text-decoration: none;
    width: 112px;
    height: 135px;
    &:active {
      transform: scale(1.05);
    }
  }
}

:deep(.home-loading) {
  height: 0.48rem;
  width: 0.48rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
:deep(.v-progressive-image) {
  background: unset;
  width: 112px;
  height: 135px;
}
</style>
